"use client"

import React, {useState, useRef, useEffect} from 'react'
// @ts-ignore
import {LuckyWheel} from '@lucky-canvas/react'

import {queryRaffleAwardList,randomRaffle} from "@/apis";
import {RaffleAwardVO} from "@/types/RaffleAwardVO";

export default function LuckyWheelPage() {

    const [prizes, setPrizes] = useState([{}])
    // @ts-ignore
    const myLucky = useRef()

    const [blocks] = useState([
        {
            padding: '40px',
            background: '#fff',
            imgs: [
                {
                    src: '/images/bg1.png',  // 转盘发光外圈图
                    width: '100%',
                    height: '100%',
                    top: '0px',
                    left: '0px',
                }
            ]
        }
    ])
    const [buttons] = useState([
        {radius: '40%', background: 'rgba(255,244,163,0.62)'},//外圈
        {radius: '35%', background: '#ffd4d4'},//中圈
        {
            radius: '30%', background: 'rgba(255,114,92,0.89)', // 内圈
            pointer: true,
            fonts: [{text: '开始', top: '-10px'}]
        }
    ])
    // 查询奖品列表
    const queryRaffleAwardListHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const strategyId = Number(queryParams.get('strategyId'));
        const response = await queryRaffleAwardList(strategyId);
        const {code, info, data} = await response.json();
        console.log("查询奖品列表：",data);
        if (code != "0000") {
            window.alert("获取抽奖奖品列表失败 code:" + code + " info:" + info)
            return;
        }

        // 创建一个新的奖品数组
        const prizes = data.map((award: RaffleAwardVO, index: number) => {
            const background = index % 2 === 0 ? '#ffd4d4' : '#ff8d6e';
            return {
                background: background,
                fonts: [{id: award.awardId, text: award.awardTitle, top: '15px'}]
            };
        });

        // 设置奖品数据
        setPrizes(prizes)
    }
    // 调用随机抽奖
    const randomRaffleHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const strategyId = Number(queryParams.get('strategyId'));
        const result = await randomRaffle(strategyId);
        const {code, info, data} = await result.json();
        console.log("随机抽奖结果：",data);
        if (code != "0000") {
            window.alert("随机抽奖失败 code:" + code + " info:" + info)
            return;
        }
        // 为了方便测试，mock 的接口直接返回 awardIndex 也就是奖品列表中第几个奖品。
        return data.awardIndex ? data.awardIndex - 1 : prizes.findIndex(prize =>
            //@ts-ignore
            prize.fonts.some(font => font.id === data.awardId)
        );
    }

    useEffect(() => {
        queryRaffleAwardListHandle().then(r => {});
    }, [])



    return <div>
        <LuckyWheel
            ref={myLucky}
            width="300px"
            height="300px"
            blocks={blocks}
            prizes={prizes}
            buttons={buttons}
            onStart={() => { // 点击抽奖按钮会触发star回调
                // @ts-ignore
                myLucky.current.play()
                setTimeout(() => {
                    // 抽奖接口
                    randomRaffleHandle().then(prizeIndex => {
                        // @ts-ignore
                        myLucky.current.stop(prizeIndex);
                    }
                    );

                }, 2500)
            }}
            onEnd={
                // @ts-ignore
                prize => {
                    alert('恭喜你抽到【' + prize.fonts[0].text + '】奖品ID【' + prize.fonts[0].id + '】')
                }

            }
        />
    </div>
}